/**
 * Created by luojie on 2018/3/13.
 * 登陆页
 */

import "../css/login.scss";
import api from "../utils/api";
import utils from "../utils/util";
import Loading from "../components/loading";

import LoginInput from "../components/login-input";
const loginBg1 = require("../images/login-bg1.png");

export default class Login extends React.PureComponent{
	constructor(props){
		super(props);
		this.state = {
			coding:false,
			minutes:60,
			request:{
				code:"",
				openid:getCookie("openid"),
				userName:"",
				mobilPhone:"",
			},
			loading:false,
		};
		this.max = 60;
		this.getCode = this.getCode.bind(this);
		this.login = this.login.bind(this);
		this.isCoding = false;
	}
	componentDidMount(){
	}
	getCode(){
		let {request} = this.state;
		if(!request.mobilPhone){
			showMsg("请输入手机号码");
			return;
		}else if(!utils.reg.mobileReg.test(request.mobilPhone)){
			showMsg("请输入正确的手机号码");
			return;
		}
		ajax(api.getSmsCode,{mobilPhone:request.mobilPhone},"post").then((result)=>{
			if(result.status == 1){
				showMsg("验证码已发送至您手机，请注意查收");
				this.setState({
					coding:true,
				});
				this.max = 60;
				this.timer = setInterval(()=>{
					if(this.max>0){
						this.max--;
						this.setState({
							coding:true,
							minutes:this.max
						});
						this.isCoding = true;
					}else{

						this.max = 60;
						this.setState({
							coding:false
						});
						this.isCoding = false;
						clearInterval(this.timer);
					}
				},1000)
			}else if(result.status == 2){
				showMsg("操作过于频繁，请稍后重试");
			}else if(result.status == 3){
				showMsg("用户已经注册");
			}else{
				showMsg("验证码发送失败，请稍后重试");
			}
		});
	}
	checkedValid(){
		let flag = true;
		let {request} = this.state;
		let msg = "";
		if(!request.userName){
			msg = "请输入家长姓名";
			flag = false;
		}else if(!request.mobilPhone){
			msg = "请输入手机号码";
			flag = false;
		}else if(!utils.reg.mobileReg.test(request.mobilPhone)){
			msg = "请输入正确的手机号码";
			flag = false;
		}else if(!request.code){
			msg = "请输入验证码";
			flag = false;
		}else{
			msg = "";
			flag = true;
		}
		if(msg){
			showMsg(msg);
		}
		return flag;


	}
	inputChange(type,value){
		let {request} = this.state;
		request[type] = value;
		this.setState({
			request:Object.assign(request)
		})

	}
	login(){

		if(!this.checkedValid()){
			return;
		};
		let {request} = this.state;
		ajax(api.login,request,"post",()=>{	this.setState({
			loading:true,
		});}).then((result)=>{
			if(result.status == 1){
				this.props.history.push("/myMember");
			}else{
				showMsg("验证码不正确，验证失败，请重试");
			}
			this.setState({
				loading:false,
			});
		});



	}
	render(){
		let {coding,minutes,loading} = this.state;
		return(
			<div className="login">
				<div className="login-container">
					<div className="login-content">
						<LoginInput
							onChange = {this.inputChange.bind(this,"userName")}
							leftText = "家长姓名"
							placeholder = "请输入家长姓名"/>
						<LoginInput
							onChange = {this.inputChange.bind(this,"mobilPhone")}
							leftText = "手机号"
							maxLength = {11}
							type = "tel"
							placeholder = "请输入您的手机号"/>

						{
							!coding &&
							<div className="login-code-row">
								<a className="login-get-code" onClick = {this.getCode}>获取验证码</a>
							</div>
						}
						{
							coding &&
							<div className="login-code-row">
								<a className="login-get-code">获取验证码</a>
								{
									coding && <a className="login-minutes">：{minutes}s</a>
								}
							</div>
						}
						<LoginInput
							onChange = {this.inputChange.bind(this,"code")}
							leftText = "验证码"
							maxLength = {6}
							type = "tel"
							placeholder = "请输入验证码"/>
						<button onClick = {this.login} className="login-submit-btn">
							<span>确</span>
							<span>认</span>
						</button>
					</div>
					<img className="login-bg1" id = "loginBottomImg" src={loginBg1} alt=""/>
				</div>

				<Loading isShow = {loading}/>
			</div>
		)
	}
}
